{%- liquid
  assign show_padding = true
  assign contact_form_id = 'contact-form-' | append: section.id
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.notes_alignment
    when 'center'
      assign notes_alignment = 'text-center'
    else
      assign notes_alignment = 'text-start'
  endcase

  assign api = section.settings.google_sheet_api
  if api != blank
    assign use_shopify_api = false
  else
    assign use_shopify_api = true
  endif

  assign mark = 'h2'
  if section.settings.enable_adjust_h_tag
    assign mark = section.settings.adjust_h_tag_to
  endif


%}
{%- style -%}
#{{ contact_form_id }} .icon-wrapper > svg {
  display: block;
  width: 20px;
  height: auto;  
}
{%- endstyle -%}
<div class="{{ background_color }} {{ text_color }}">
  <div class="container {% if show_padding %}py-section{% else %}my-section{% endif %}">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <{{ mark }} class="h2 text-center">{{ section.settings.heading | escape }}</{{ mark }}>
        <div class="mb-lg-6 mb-5 lead fw-normal text-center no-last-margin richtext-with-link">{{ section.settings.description }}</div>
        {%- if section.blocks.size > 0 -%}
          {% comment %}强校验{% endcomment %}
          {% comment %}{%- form 'contact', id: contact_form_id, class: 'as-validate-form', novalidate: 'novalidate', autocomplete: "off" -%}{%- endform -%}{% endcomment %}
          {% comment %}弱校验{% endcomment %}
          {%- if use_shopify_api -%}
            {%- form 'contact', id: contact_form_id -%}
              <div class="row">
                {% render 'contact-form', use_shopify_api: use_shopify_api %}
                {%- if form.posted_successfully? -%}
                  {% comment %}提交成功{% endcomment %}
                  <div class="d-flex mt-3 small text-success" tabindex="-1"><div class="me-1 icon-wrapper">{% render 'icon-check-circle' %}</div><p class="mb-0">{{ 'sections.form.post_success' | t }}</p></div>
                {%- elsif form.errors -%}
                  {% comment %}提交失败{% endcomment %}
                {%- endif -%}
                <div class="mt-6 text-center">
                  <button class="btn btn-{{ btn_style }} as-submit" type="submit">
                    <span class="as-spinner visually-hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    {{ section.settings.button_label }}
                  </button>
                </div>
              </div>
            {%- endform -%}
          {%- else -%}
            {%- comment -%}How to connet to [Google Sheet](https://github.com/jamiewilson/form-to-google-sheets){%- endcomment -%}
            <contact-form>
              <form method="post" class="as-contact-form" id="{{ contact_form_id }}" data-action="{{ api }}">
                <div class="row">
                  {% render 'contact-form', use_shopify_api: use_shopify_api %}
                  {% comment %}提交成功{% endcomment %}
                  <div class="mt-3 small text-success as-success-tips d-none" tabindex="-1">
                    <div class="d-flex">
                      <div class="me-1 icon-wrapper">{% render 'icon-check-circle' %}</div>{{ 'sections.form.google_sheet_post_success' | t }}
                    </div>
                  </div>

                  <div class="mt-6 text-center">
                    <button class="btn btn-{{ btn_style }} as-submit" type="submit">
                      <span class="as-spinner visually-hidden spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                      {{ section.settings.button_label }}
                    </button>
                  </div>
                </div>
              </form>
            </contact-form>
          {%- endif -%}
        {%- endif -%}
        {%- if section.settings.notes != blank -%}
          <div class="mt-6 {{ notes_alignment }} richtext-with-link">
            {{ section.settings.notes | replace: '<p>', '<p class="mb-0">' }}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{%- unless use_shopify_api -%}
  <script src="{{ 'contact-form.min.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

{% schema %}
{
  "name": "t:sections.contact-form.name",
  "class": "contact-us as-contact-us",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Contact us",
      "label": "Heading"
    },
    {
      "type": "checkbox",
      "id": "enable_adjust_h_tag",
      "label": "Enable adjust H tag",
      "default": false
    },
    {
      "type": "select",
      "id": "adjust_h_tag_to",
      "label": "Adjust the H tag to",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "h4",
          "label": "H4"
        },
        {
          "value": "h5",
          "label": "H5"
        },
        {
          "value": "h6",
          "label": "H6"
        }
      ],
      "default":   "h3"
    },
    {
      "type": "richtext",
      "id": "description",
      "default": "<p>Leave your message here and we will reply to you shortly.</p>",
      "label": "Description"
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "options": [
        {
          "value": "white",
           "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }  
      ],
      "default": "black"
    },
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Send",
      "label": "Button label"
    },
    {
      "type": "richtext",
      "id": "notes",
      "default": "<p>Notes</p>",
      "label": "Notes"
    },
    {
      "type": "select",
      "id": "notes_alignment",
      "label": "Notes alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left"
    },
    {
      "type": "url",
      "id": "google_sheet_api",
      "label": "Google Sheet API"
    }
  ],
  "blocks": [
    {
      "name": "Email",
      "type": "email",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "default": "Email",
          "label": "Label"
        },
        {
          "type": "text",
          "id": "placeholder",
          "default": "Email",
          "label": "Placeholder"
        },
        {
          "type": "checkbox",
          "id": "required",
          "default": true,
          "label": "Required"
        },
        {
          "type": "select",
          "id": "column_width",
          "label": "Column width",
          "options": [
            {
              "value": "full",
              "label": "Full"
            },
            {
              "value": "half",
              "label": "Half"
            }
          ],
          "default": "half"
        }
      ]
    },
    {
      "name": "Text field",
      "type": "text_field",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "default": "Message",
          "label": "Label"
        },
        {
          "type": "text",
          "id": "placeholder",
          "default": "Message",
          "label": "Placeholder"
        },
        {
          "type": "checkbox",
          "id": "required",
          "default": true,
          "label": "Required"
        },
        {
          "type": "checkbox",
          "id": "enable_long_text",
          "default": true,
          "label": "Enable long text"
        },
        {
          "type": "select",
          "id": "column_width",
          "label": "Column width",
          "options": [
            {
              "value": "full",
              "label": "Full"
            },
            {
              "value": "half",
              "label": "Half"
            }
          ],
          "default": "full"
        }
      ]
    },
    {
      "name": "Dropdown",
      "type": "dropdown",
      "settings": [
        {
          "type": "text",
          "id": "label",
          "default": "Dropdown",
          "label": "Label"
        },
        {
          "type": "richtext",
          "id": "values",
          "label": "Values",
          "default": "<p>value 1</p><p>value 2</p><p>value 3</p>",
          "info": "Separate each value with a newline"
        },
        {
          "type": "text",
          "id": "placeholder",
          "label": "Placeholder",
          "default": "Please select"
        },
        {
          "type": "checkbox",
          "id": "required",
          "default": true,
          "label": "Required"
        },
        {
          "type": "select",
          "id": "column_width",
          "label": "Column width",
          "options": [
            {
              "value": "full",
              "label": "Full"
            },
            {
              "value": "half",
              "label": "Half"
            }
          ],
          "default": "half"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.contact-form.presets.name",
      "blocks": [
        {
          "type": "email"
        },
        {
          "type": "dropdown"
        },
        {
          "type": "text_field"
        }
      ]
    }
  ]
}
{% endschema %}